<template>
  <div>
    <el-row
      :gutter="20"
      style="margin-bottom: 16px;"
    >
      <el-col :span="6">
        <el-select
          v-model="statusFilter"
          placeholder="筛选状态"
          style="width: 100%;"
        >
          <el-option
            label="全部"
            value=""
          />
          <el-option
            label="未处理"
            value="未处理"
          />
          <el-option
            label="已处理"
            value="已处理"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button
          type="primary"
          @click="batchApprove"
        >
          批量通过
        </el-button>
        <el-button
          type="danger"
          @click="batchReject"
        >
          批量驳回
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col
        v-for="item in pagedReports"
        :key="item.id"
        :span="8"
        style="margin-bottom: 20px;"
      >
        <el-card>
          <div style="display: flex; align-items: center;">
            <el-avatar
              :size="40"
              style="margin-right: 12px;"
            >
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
            <div>
              <div style="font-weight: bold;">
                {{ item.user }}
              </div>
              <div style="color: #888; font-size: 13px;">
                举报时间：{{ item.time }}
              </div>
            </div>
            <el-tag
              :type="item.status === '已处理' ? 'success' : 'warning'"
              style="margin-left:auto;"
            >
              {{ item.status }}
            </el-tag>
          </div>
          <el-divider />
          <el-collapse v-model="activeNames">
            <el-collapse-item :name="item.id">
              <template #title>
                举报内容
              </template>
              <div>{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse>
          <div style="margin-top: 12px;">
            <el-checkbox v-model="item.selected">
              选择
            </el-checkbox>
            <el-button
              v-if="item.status === '未处理'"
              size="small"
              type="success"
              @click="approve(item)"
            >
              通过
            </el-button>
            <el-button
              v-if="item.status === '未处理'"
              size="small"
              type="danger"
              @click="reject(item)"
            >
              驳回
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      v-model:current-page="currentPage"
      style="margin-top: 16px; text-align: right;"
      background
      layout="prev, pager, next"
      :total="filteredReports.length"
      :page-size="pageSize"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UserFilled } from '@element-plus/icons-vue'
const pageSize = 6
const currentPage = ref(1)
const statusFilter = ref('')
const activeNames = ref<any[]>([])
const reports = ref([
  { id: 1, content: '商品信息虚假', status: '未处理', time: '2025-06-06', user: '张三', selected: false },
  { id: 2, content: '用户发布违规内容', status: '已处理', time: '2025-06-06', user: '李四', selected: false },
  { id: 3, content: '恶意刷单', status: '未处理', time: '2025-06-06', user: '王五', selected: false },
  { id: 4, content: '图片涉黄', status: '未处理', time: '2025-06-06', user: '赵六', selected: false }
])
const filteredReports = computed(() =>
  statusFilter.value ? reports.value.filter(r => r.status === statusFilter.value) : reports.value
)
const pagedReports = computed(() =>
  filteredReports.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize)
)
function approve(row: any) {
  row.status = '已处理'
  ElMessage.success('已通过')
}
function reject(row: any) {
  row.status = '已处理'
  ElMessage.success('已驳回')
}
function batchApprove() {
  const selected = reports.value.filter(r => r.selected && r.status === '未处理')
  if (selected.length === 0) {
    ElMessage.warning('请先选择未处理的举报')
    return
  }
  selected.forEach(r => (r.status = '已处理'))
  ElMessage.success('批量通过成功')
}
function batchReject() {
  const selected = reports.value.filter(r => r.selected && r.status === '未处理')
  if (selected.length === 0) {
    ElMessage.warning('请先选择未处理的举报')
    return
  }
  selected.forEach(r => (r.status = '已处理'))
  ElMessage.success('批量驳回成功')
}
</script> 